<!-- 学者 -->
<template>
    <div class="box" v-loading="loading">
        <el-card class="box-card">


            <div class="">
                <!-- AggsItemH -->
                <aggs-item-h v-for="( value, key) in aggsList" single :key="key" :title="value.title" :datas="value.list"
                    :checkList.sync="check[key]" @change="aggsChange($event, key)"></aggs-item-h>
            </div>
        </el-card>


        <el-card class="box-card">
            <div>
                <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
                    <el-radio-button label="列表展示">列表展示</el-radio-button>
                    <el-radio-button label="可视化分析">可视化分析</el-radio-button>
                </el-radio-group>
            </div>

            <!-- 列表展示 -->
            <div v-show="tabPosition == '列表展示'">
                <div class="search">
                    <div>
                        <span style="float: left;line-height: 27px;">排序:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <div class="listCss" v-for="(item, index) in listArr" :key="item"
                            :class="{ 'activeCss': activeVar == index }" @click="activeFun(item, index)">
                            {{ item }}
                            <i v-if="activeVar == index" class="el-icon-arrow-up"></i>
                            <i v-else class="el-icon-arrow-down"></i>
                        </div>
                    </div>

                    <div style="float: right;">共有 {{ total }} 条记录</div>
                </div>

                <el-row class="">
                    <el-col :span="12" :class="item.nobelPrize.length > 1 ? 'infos' : 'info'"
                        v-for="item in dataList.nobelPrizeWinnerList" :key="item.uuid" v-on:click.native="detail(item)">
                        <div>
                            <img style="width: 120px;height: 120px;border-radius: 8px;margin:0 20px;"
                                :src="item.photoLocalLink" alt="">
                        </div>
                        <div>
                            <h3 style="font-size: 16px;font-weight: bold;">
                                {{ item.nameEn }}
                                <span v-if="item.nameCn != ''">（{{ item.nameCn }}）</span>
                            </h3>
                            <div class="award" v-for="ele in item.nobelPrize" :key="ele.nameCn">
                                <p style="color: #3E5215;font-weight: 400;">{{ ele.awardedYear }}年{{ ele.categoryFullname }}
                                </p>
                                <p class="text">所属机构：{{ ele.awardedAffiliation }} </p>
                                <p :class="item.nobelPrize.length > 1 ? 'texts' : 'text'">获奖原因：{{ ele.motivation }} </p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <pagination style="margin-left:25%" v-show="total > 0" :total="total" :page.sync="queryParams.current"
                    :limit.sync="queryParams.size" @pagination="getList" />
            </div>
            <!-- 可视化分析 -->
            <div v-show="tabPosition == '可视化分析'">
                111
            </div>
        </el-card>

    </div>
</template>
<script>
import { AggsItemH, Ripple } from "@zkwq/business";
// import "@zkwq/business/dist/css/AggsItemH.min.css";
import { researcherList } from "@/api/scholar";
export default {
    data () {
        return {

            // 默认为0(如不需要默认可设为null)，点击时将索引赋值给active，从而实现点击选中效果
            activeVar: -1,
            //  循环列表
            listArr: ["获奖年份", "年龄", "首字母",],
            // 总条数
            total: 10,
            //查询参数
            queryParams: {
                current: 1,
                size: 10,
                age: null,
                ageOrder: null,
                category: null,
                country: null,
                gender: null,
                institution: null,
                nameOrder: null,
                search: null,
                yearOrder: null,
            },
            loading: true,
            activeNames: ['1'],

            tabPosition: '列表展示',

            showAll: true,
            tableData: [],
            //查询条件form
            condForm: {
            },
            condition: '',
            xslxoptions: [{
                id: "1",
                name: "土地"
            },
            {
                id: "2",
                name: "房屋"
            },
            {
                id: "3",
                name: "矿产"
            },
            ],
            options: [{
                value: '1',
                label: '动态巡查'
            }, {
                value: '2',
                label: '电话举报'
            }, {
                value: '3',
                label: '信访举报'
            }, {
                value: '4',
                label: '媒体曝光'
            }, {
                value: '5',
                label: '其他单位转交'
            }, {
                value: '6',
                label: '其他'
            }],
            check: {},
            aggsList: {},
            aggsCheck: {},
            pageIndex: 0,
            pageSize: 0,
            pageSizes: [20, 50, 100, 200],
            totalPage: 0,
            //height: window.innerHeight - 200,


            dataList: [],//数据列表
            //年龄列表
            ageList: [],
            // 奖项
            categoryList: [],
            // 国家
            countryList: [],
            // 机构
            institutionList: [],
            // 性别
            genderList: [],
        }
    },
    components: {
        AggsItemH
    },
    mounted () {

    },
    computed: {
        tableHeight () {
            if (this.showAll) {
                return window.innerHeight - 140
            } else {
                return window.innerHeight - 200
            }
        }
    },
    created () {
        this.getList()
    },
    methods: {
        closepop () {
            this.showAll = !this.showAll;
            console.log('父组件的状态：' + this.showAll)
        },
        cliii () {
            console.log(this.tabPosition);
        },
        getList () {
            this.loading = true
            researcherList(this.queryParams).then((res) => {
                let aggs = res.body
                this.dataList = res.body

                this.dataList.nobelPrizeWinnerList.forEach((item, index) => {
                    item.nobelPrize.forEach((element, ind) => {
                        this.dataList.nobelPrizeWinnerList[index].nobelPrize[ind].awardedAffiliation = this.dataList.nobelPrizeWinnerList[index].nobelPrize[ind].awardedAffiliation.join()
                    });
                });

                this.ageList = res.body.ageList
                this.categoryList = res.body.categoryList
                this.countryList = res.body.countryList
                this.institutionList = res.body.institutionList
                this.genderList = res.body.genderList


                this.total = res.body.total

                let nameList = {
                    categoryList: "奖项",
                    countryList: "国家",
                    institutionList: "机构",
                    ageList: "年龄",
                    genderList: "性别"
                }
                for (let key in aggs) {
                    let data = [];
                    // console.log(aggs[key]);
                    if (aggs[key] && aggs[key].length) {
                        aggs[key].forEach(element => {
                            if (element.key) {
                                let arr = { key: element.key, value: element.count }
                                data.push(arr)
                            }
                        });
                        // console.log(this.check[key].length > 0);
                        if (this.check[key] && this.check[key].length > 0) {
                            this.aggsList[key] = { title: nameList[key], list: data };
                        } else {
                            if ([key][0] != 'nobelPrizeWinnerList') {
                                this.aggsList[key] = { title: nameList[key], list: data };
                                this.$set(this.check, key, [])
                            }
                        }
                    }
                }
                // console.log(this.aggsList);
                this.loading = false
            })
        },

        aggsChange (list, key) {
            // 分类浏览条件选择
            let name = key.replace('List', '')
            let value = "";
            if (list.length > 0) {
                list.forEach((item, index) => {
                    if (index == 0) {
                        value += item;
                    } else {
                        value += ';' + item;
                    }
                })
            }
            this.$set(this.queryParams, name, value);
            // this.queryParams.size = 1;
            // console.log(this.queryParams);
            this.getList()
        },
        // 排序
        sort (type) {
            if (type == 'year') {
                this.queryParams.yearOrder = 'desc'
                this.$set(this.queryParams, yearOrder, value);
            } else if (type == 'age') {
                this.$set(this.queryParams, ageOrder, value);
            } else if (type == 'letter') {
                this.$set(this.queryParams, nameOrder, value);
            }
            // this.getList()
        },
        detail (item) {
            this.$router.push({ path: `/scholarDetail`, query: { uuId: item.uuid } })
        },
        // 排序
        activeFun (item, index) {
            if (index != this.activeVar) {
                this.activeVar = index;
                if (item == '获奖年份') {
                    this.queryParams.yearOrder = 'desc'
                } else if (item == '年龄') {
                    this.queryParams.ageOrder = 'desc'
                } else {
                    this.queryParams.nameOrder = 'desc'
                }
            } else {
                this.activeVar = -1;
                if (item == '获奖年份') {
                    this.queryParams.yearOrder = 'asc'
                } else if (item == '年龄') {
                    this.queryParams.ageOrder = 'asc'
                } else {
                    this.queryParams.nameOrder = 'asc'
                }
            }
            this.getList()
        }
    },
}
</script>
<style scoped lang='less'>
body {
    overflow: auto;
    font-size: 22px;
}

.box {
    width: 1200px;
    margin: 0 auto;
}

.box-card {
    width: 100%;
    margin-top: 20px;
}

.btnRow {
    display: block;
}

.unBtnRow {
    display: none;
}

.querytitle {
    width: 33px;
    height: 17px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    line-height: 44px;
}

.search {
    height: 40px;
}

.search div {
    float: left;
    /* display: flex; */
}

.info {
    /* width: 555px; */
    min-height: 160px;
    background: #FFFFFF;
    box-shadow: -5px 0px 20px 4px rgba(31, 46, 1, 0.07);
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.infos {
    overflow: hidden;
    height: 160px;
    background: #FFFFFF;
    box-shadow: -5px 0px 20px 4px rgba(31, 46, 1, 0.07);
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    cursor: pointer;
    padding-top: 20px;

}

.infos:hover {
    height: 340px;
    transition: all 0.4s ease 0s;
}

.infos:hover .texts {
    font-weight: 400;
    color: #666666;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.award {
    margin: 10px 0;
}

.award p {
    line-height: 28px;
}

/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    width: 117px;
    height: 44px;
    background: linear-gradient(0deg, #47630C, #78A816, #D8D8D8);
    border-radius: 4px;
    border: 0;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
}

/deep/ .el-radio-button__inner {
    width: 117px;
    height: 44px;
    background: #FFFFFF;
    border: 2px solid #E7E7E7;
    // border: 0;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
}


// 默认样式
.listCss {
    cursor: pointer;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    // border: 1px solid #ccc;
    float: left;
    margin-right: 10px;

}

// 选中时的样式 (继承上方默认样式)
.activeCss {
    background: linear-gradient(0deg, #47630C, #78A816, #D8D8D8);
    color: #FFFFFF;
    border-radius: 10px;
}

.aggs_item {
    padding-bottom: 0;
}

.text {
    font-weight: 400;
    color: #666666;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.texts {
    font-weight: 400;
    color: #666666;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    // -webkit-line-clamp: 1;
    // -webkit-box-orient: vertical;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: linear-gradient(0deg, #47630C, #78A816, #D8D8D8);
}

/deep/ .aggs_item .name[data-v-cb382cc4] {
    width: 60px;
}

// /deep/ .aggs_item .item .selected[data-v-cb382cc4],
// .aggs_item .item li[data-v-cb382cc4]:hover {
//     background: linear-gradient(0deg, #47630C, #78A816, #D8D8D8);
// }
</style>
